<template>
  <div>
    <div id="map" class="map" />
    <el-tag class="tag">{{ site.siteName }}</el-tag>
    <el-button
      v-if="btnFlag"
      class="btn"
      type="primary"
      @click.native="draw"
    >{{ btnMessage[drawFlag] }}</el-button>
    <!-- 新建地块表单 -->
    <el-dialog
      v-el-drag-dialog
      title="新建地块"
      :visible.sync="dialogFormVisible"
      @close="cancel"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item label="地块名称" prop="placeName">
          <el-input v-model="temp.placeName" />
        </el-form-item>
        <el-form-item label="地块面积" prop="square">
          <el-input :placeholder="temp.square + '平方千米'" :disabled="true" />
        </el-form-item>
        <el-form-item label="监控链接" prop="vidoUrl">
          <el-input v-model="temp.vidoUrl" placeholder="选填" />
        </el-form-item>
        <el-form-item label="监控名称" prop="vidoName">
          <el-input v-model="temp.vidoName" placeholder="选填" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mapinit from '@/utils/map-init.js'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'PlaceMap',
  directives: { elDragDialog },
  props: {
    site: {
      type: Object,
      required: true
    },
    siteLngLats: {
      type: [String, Array],
      required: true
    },
    placesLngLats: {
      type: [String, Array],
      required: true
    },
    temp: {
      type: Object,
      required: true
    },
    dialogFormVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      zoom: '15',
      tool: null,
      map: null,
      T: null,
      editFlag: false,
      btnMessage: {
        [false]: '绘制新的地块',
        [true]: '取消绘制'
      },
      drawFlag: false,
      btnFlag: true,
      rules: {
        placeName: [
          {
            required: true,
            message: '请填写地块名称',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    site() {
      this.initMap()
    },
    siteLngLats() {
      setTimeout(() => {
        this.drawSite()
      }, 500)
    },
    placesLngLats() {
      setTimeout(() => {
        this.drawPlaces()
      }, 500)
    }
  },
  methods: {
    initMap() {
      mapinit.init().then(T => {
        const map = new T.Map('map', {
          minZoom: 4
        })
        map.setMapType(TMAP_HYBRID_MAP)// 设置卫星路网复合地图
        map.centerAndZoom(new T.LngLat(this.site.lng, this.site.lat), this.zoom)// 根据基地经纬度定位

        this.T = T
        this.map = map

        const polygonTool = new T.PolygonTool(this.map, {
          color: '#009966',
          weight: 3,
          opacity: 1,
          fillColor: '#009966',
          fillOpacity: 0.3,
          showLabel: true
        })

        polygonTool.setTips('双击结束绘制')
        polygonTool.addEventListener('draw', (event) => {
          this.drawFlag = !this.drawFlag
          this.btnFlag = false
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
          this.$emit('draw-over', event)
        })
        this.tool = polygonTool
      })
    },
    drawSite() {
      const points = this.siteLngLats.map(([lng, lat]) => {
        return new this.T.LngLat(lng, lat)
      })
      this.addPolygon(points)
    },
    drawPlaces() {
      this.placesLngLats.map(item => {
        const points = item.map(([lng, lat]) => {
          return new this.T.LngLat(lng, lat)
        })
        this.addPolygon(points)
      })
    },
    addPolygon(points) {
      const polygon = new this.T.Polygon(points, {
        color: '#009966',
        weight: 3,
        opacity: 1,
        fillColor: '#009966',
        fillOpacity: 0
      })
      this.map.addOverLay(polygon)
    },
    addData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$emit('add-place')
        }
      })
    },
    cancel() {
      this.$emit('cancel-dialog')
      this.btnFlag = true
      this.tool.clear()
      this.tool.close()
    },
    draw() {
      if (!this.drawFlag) {
        this.tool.open()
      } else {
        this.tool.clear()
        this.tool.close()
      }
      this.drawFlag = !this.drawFlag
    },
    edit(polygon) {
      this.$confirm('是否修改地图?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        polygon.enableEdit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    add(polygon) {
    },
    modify(polygon) {
      this.$confirm('此操作将修改地图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const lngLats_TDT = polygon.getLngLats()[0]
        const lngLats = this.formatLngLats(lngLats_TDT)
        this.$emit('update_coordinate', lngLats)
        polygon.disableEdit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    formatLngLats(lngLats_TDT) {
      const lngLats = lngLats_TDT.map(item => {
        return `${item.getLng()},${item.getLat()}`
      })
      return lngLats.join('@')
    },
    polygonAddClickEventListener(polygon) {
      polygon.addEventListener('click', (event) => {
        const polygon = event.target
        if (!this.editFlag) {
          this.edit(polygon)
        } else {
          this.modify(polygon)
        }
        this.editFlag = !this.editFlag
      })
    }
  }
}
</script>

<style scoped>

.map-wrapper {
  position: relative;
}

.map {
  width: 100%;
  height: calc( 100vh - 50px);
  z-index: 1;
  /* margin-top: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 5px 0 #333; */
}

.btn {
  position: absolute;
  top: 60px;
  right: 10px;
  z-index: 2;
}

.tag {
  position: absolute;
  top: 60px;
  left: 10px;
  z-index: 2;
}

.map >>> .tdt-control-copyright {
  display: none;
}

</style>
